<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<head>
  <meta charset="UTF-8">
  <title>music</title>
</head>
<body>
<div id="app">
  开始时间<input type="number" v-model="startTime">
  结束时间<input type="number" v-model="stopTime">
  <button @click="startMusic">开始区间播放</button>
  <!--  歌曲输入框-->
  <input type="text" v-model="query" @keyup.enter="searchMusic">
  <!--  查询按钮-->
  <input type="submit" @click="searchMusic" value="查询">

  <div>
    <!--    歌曲封面-->
    <img :src="picUrl" width="300" align="right">
  </div>
  <div>
    <div>
      <!--    歌曲评论-->
      <table v-for="list in hotComments">
        <tr>
          <!--          评论头像-->
          <td><img :src="list.user.avatarUrl" width="50"></td>
          <!--          评论名字-->
          <td bgcolor="#7fffd4">{{list.user.nickname}}</td>
          <!--          评论信息-->
          <td>{{list.content}}</td>
        </tr>
      </table>
    </div>
    <table v-show="musicList.length>0">
      <tr>
        <td bgcolor="#6495ed">歌名</td>
        <td bgcolor="#6495ed">播放按钮</td>
      </tr>
      <tr v-for="list in musicList">
        <td>{{list.name}}</td>
        <!--      发送歌曲id和mvid-->
        <td><input type="submit" value="选择" @click="playMusic(list.id),playMv(list.mvid)"></td>
        <td v-show="list.mvid!=0">(mv)</td>
      </tr>
    </table>
  </div>
  <!--  mv播放-->
  <video v-show="mvUrl!=null&&mvUrl!=''" :src="mvUrl" controls="controls" width="400">
  </video>
  <div>
    <!--    获取data中歌曲的url 此时能凭此url直接播放-->
    <audio id="audio" v-show="musicList.length>0" :src="musicUrl" controls="controls">
    </audio>
  </div>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      //开始时间
      startTime: "",
      //结束时间
      stopTime: "",
      //查询关键字
      query: "",
      //歌曲列表
      musicList: [],
      //歌曲地址
      musicUrl: "",
      //封面地址
      picUrl: "",
      //歌曲评论
      hotComments: [],
      //MV地址
      mvUrl: "",
    },
    methods: {
      //区间播放开始
      startMusic: function () {
        myAud = document.getElementById("audio");
        myAud.currentTime = this.startTime //调整当前播放时间
        myAud.addEventListener('timeupdate', this.stopMusic, false);//开启监听
        myAud.play(myAud)//开始播放
      },
      //停止播放区间
      stopMusic: function () {
        myAud = document.getElementById("audio");
        //当前播放时间大于停止播放的时间时候停止播放
        if (myAud.currentTime > this.stopTime) {
          myAud.pause();
          //移除监听
          myAud.removeEventListener('timeupdate', null, false);
        }
      },
      //获取歌曲列表
      searchMusic: function () {
        var that = this;
        axios.get("https://autumnfish.cn/search?keywords=" + this.query)
          .then(function (response) {
            // console.log(response);
            // console.log(response.data.result.songs);
            that.musicList = response.data.result.songs;
          }, function (err) {
            // console.log(err);
          })
      },
      //获取歌曲id
      playMusic: function (musicId) {
        var that = this;
        // console.log(musicId);
        //解析歌曲id
        axios.get("https://autumnfish.cn/song/url?id=" + musicId)
          .then(function (response) {
            // console.log(response.data.data[0].url);
            //解析的URL返回到data
            that.musicUrl = response.data.data[0].url;
          }, function (err) {
          })
        //歌曲封面获取
        axios.get("https://autumnfish.cn/song/detail?ids=" + musicId)
          .then(function (response) {
            // console.log(response);
            // console.log(response.data.songs[0].al.picUrl);
            that.picUrl = response.data.songs[0].al.picUrl;
          }, function (err) {

          })
        //歌曲评论获取
        axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
          .then(function (response) {
            // console.log(response);
            that.hotComments = response.data.hotComments;
          }, function (err) {

          })


      },
      //mv链接获取
      playMv: function (mvid) {
        var that = this;
        axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
          .then(function (response) {
            console.log(response.data.data.url);
            that.mvUrl = response.data.data.url;
          }, function (err) {

          })

      }
    }

  })
</script>
</body>
</html>
